            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>
            <body>
                <script>
            window.onload=function(){
            //    document.getElementById();
            //    document.getElementsByClassName();
            //    document.getElementsByName();
            //    document.getElementsByTagName();

            // document.querySelector();对象
            // document.querySelectorAll();数组
        // var li =document.querySelector("#li1");
        // li.parentElement.style.color="red";
        // console.log(li.parentElement);
        // console.log(li.parentNode);


        //样式  style
        var li =document.querySelector("#li1");
        li.style.color="red";
        //  li.style.backgroundColor="#ccc";
        li.style["background-color"]="#ccc";


    // 属性 attribbutes
        console.log(li.id);
        console.log(li.className);
        console.log(li.attributes["data-id"]);       //vlue和name(值和名字)
        console.log(li.attributes["data-id"].vlue);  


    //兄弟节点
       var li =document.querySelector("#li1");
       console.log( li.nextElementSibling);      //下一个兄弟元素
       console.log(li.nextSibling);              //下一个兄弟元素的文本节点

 
    //click      点击事件
    //change单选、多选状态改变    下拉框选则改变  文本框值改变
    //mouseover    鼠标移入
    //mouseout     鼠标移出
    //*keydown      键盘事件
    //keypress
    //keyup

    var btn= document.querySelector("button");
    btn.onclick=function(){
        alert(this.value);                //交互控件的值
    }
    var li=document.querySelector("#li1");
    li.onclick=function(){
        console.log(this.innerHTML);     //里面的标签
        console.log(this.innerText);    //里面的文本
    }

    var select=document.querySelector("select");
    select.onchange=function(){
        console.log(this.value);
    }
            }
                </script>
            </body>
            <ul>
            <li id="li1" class="li" data-id="0">列表1<span>99</span></li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表5</li>

            </ul>
            <button value="点击事件">点击事件</button>

             <select name="" id="" size="1">
                 <option value="1">选项1</option>
                 <option value="2">选项2</option>
                 <option value="3">选项3</option>
             </select>
            </html>